<script setup lang="ts">
import { ref, onMounted, onUnmounted, Ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import * as echarts from 'echarts'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import { useTeamStore, useUserStore } from '@/store'
import { pageProjectUsingPost } from '@/api/projectController'
import { Message } from '@arco-design/web-vue'
import {
  getWeekTaskTrendUsingGet,
  getStatisticsAllUsingGet,
  getStatisticsCurrentUsingGet
} from '@/api/statisticsController'
import { COMPLETE_STATUS_CONFIG } from '@/constants/CompleteStatus'
import { PRIORITY_CONFIG } from '@/constants/Priority'
import TaskView from '@/components/tasks/TaskView.vue'
import RequirementView from '@/components/requirements/RequirementView.vue'
import BugView from '@/components/bugs/BugView.vue'

const router = useRouter()
const teamStore = useTeamStore()
const userStore = useUserStore()
dayjs.locale('zh-cn') // 使用中文

// 在其他 ref 变量定义的地方添加
const taskList = ref([])
const bugList = ref([])
const statistics = ref({
  ongoingTasks: 0,
  ongoingBugs: 0,
  projectCount: 0
})

// 保存图表实例的引用
const taskChart = ref<echarts.EChartsType | null>(null)
const bugChart = ref<echarts.EChartsType | null>(null)
const taskTrendChart = ref<echarts.EChartsType | null>(null)
const bugTrendChart = ref<echarts.EChartsType | null>(null)

// 项目列表数据
const projects = ref<API.ProjectVo[]>([])
const projectCount = ref<number>(0)
// 查询参数
const pageProjectRequest: Ref<API.PageProjectRequest> = ref({
  current: 1,
  pageSize: 1000,
  teamId: teamStore?.selectedTeam?.id,
  title: '',
  code: undefined,
  ownerId: undefined
})

// 当前选中的项目ID和项目对象
const selectedProjectId = ref<number | null>(null)
const selectedProject = ref<API.ProjectVo | null>(null)

// 我的未完成信息
const myUnfinishedInfo = ref<API.StatisticsVo | null>(null)
// 监听项目变化
watch(
  () => selectedProjectId.value,
  async (newProjectId) => {
    if (newProjectId) {
      // 切换项目时重新加载统计数据
      await loadStatistics()
    }
  }
)

// 加载项目列表
const loadProjects = async () => {
  try {
    const res: any = await pageProjectUsingPost(pageProjectRequest.value)

    if (res.code === 0) {
      projects.value = res.data.records || []
      // 如果有项目数据，默认选中第一个项目
      if (projects.value.length > 0) {
        const firstProject = projects.value[0]
        selectedProjectId.value = firstProject.id
        selectedProject.value = firstProject
      }
    } else {
      Message.error(res.message || '获取项目列表失败')
    }
  } catch (error) {
    console.error('Failed to load projects:', error)
    Message.error('获取项目列表失败')
  }
}

// 加载统计数据
const loadStatistics = async () => {
  const projectId = selectedProject.value?.id
  if (!projectId) return
  try {
    // 获取趋势图数据
    const res: any = await getWeekTaskTrendUsingGet({
      projectId
    })

    if (res.code === 0) {
      // 获取本周日期范围
      const weekDays = generateWeekDays()

      // 统计每天完成的任务和缺陷数量
      const taskData = new Array(7).fill(0)
      const bugData = new Array(7).fill(0)

      // 处理任务数据
      const allTasks = [...(res.data.requirementVoList || []), ...(res.data.taskVoList || [])]

      allTasks.forEach((task) => {
        if (task.completeTime) {
          const completeDay = dayjs(task.completeTime).format('MM-DD')
          const dayIndex = weekDays.findIndex((day) => day.startsWith(completeDay))
          if (dayIndex !== -1) {
            taskData[dayIndex]++
          }
        }
      })

      // 处理缺陷数据
      ;(res.data.bugVoList || []).forEach((bug) => {
        if (bug.completeTime) {
          const completeDay = dayjs(bug.completeTime).format('MM-DD')
          const dayIndex = weekDays.findIndex((day) => day.startsWith(completeDay))
          if (dayIndex !== -1) {
            bugData[dayIndex]++
          }
        }
      })

      // 更新任务趋势图配置
      if (taskTrendChart.value) {
        taskTrendChart.value.setOption({
          grid: {
            top: 40,
            right: 20,
            bottom: 40,
            left: 40,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c}个'
          },
          xAxis: {
            type: 'category',
            data: weekDays
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          series: [
            {
              name: '任务',
              type: 'line',
              data: taskData,
              symbolSize: 8,
              label: {
                show: true,
                position: 'top'
              }
            }
          ]
        })
      }

      // 更新缺陷趋势图配置
      if (bugTrendChart.value) {
        bugTrendChart.value.setOption({
          grid: {
            top: 40,
            right: 20,
            bottom: 40,
            left: 40,
            containLabel: true
          },
          tooltip: {
            trigger: 'axis',
            formatter: '{b}: {c}个'
          },
          xAxis: {
            type: 'category',
            data: weekDays
          },
          yAxis: {
            type: 'value',
            minInterval: 1
          },
          series: [
            {
              name: '缺陷',
              type: 'line',
              data: bugData,
              symbolSize: 8,
              label: {
                show: true,
                position: 'top'
              }
            }
          ]
        })
      }
    } else {
      Message.error(res.message || '获取统计数据失败')
    }
  } catch (error) {
    console.error('Failed to load statistics:', error)
    Message.error('获取统计数据失败')
  }

  try {
    // 获取饼图数据
    const res: any = await getStatisticsAllUsingGet({
      teamId: teamStore.selectedTeam?.id,
      projectId
    })
    if (res.code === 0) {
      // 合并任务和需求列表
      const allTasks = [...(res.data.requirementVoList || []), ...(res.data.taskVoList || [])]

      // 处理任务状态饼图数据
      if (taskChart.value) {
        // 统计每个状态的数量
        const statusCount = new Map()
        allTasks.forEach((task) => {
          const status = Number(task.status)
          statusCount.set(status, (statusCount.get(status) || 0) + 1)
        })

        // 生成饼图数据
        const taskStatusData = Object.values(COMPLETE_STATUS_CONFIG)
          .map((config) => ({
            value: statusCount.get(config.value) || 0,
            name: config.label,
            itemStyle: {
              color: config.color
            }
          }))
          .filter((item) => item.value > 0)

        taskChart.value.setOption({
          title: {
            text: '我的任务状态分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            bottom: '0%',
            type: 'scroll'
          },
          series: [
            {
              name: '任务状态',
              type: 'pie',
              radius: '50%',
              data: taskStatusData,
              label: {
                show: true,
                formatter: '{b}: {c}' // 显示名称和数量
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }

      // 处理缺陷状态饼图数据
      if (bugChart.value) {
        const bugStatusData = Object.values(COMPLETE_STATUS_CONFIG)
          .map((config) => ({
            value: (res.data.bugVoList || []).filter((bug) => bug.status === config.value).length,
            name: config.label,
            itemStyle: {
              color: config.color
            }
          }))
          .filter((item) => item.value > 0) // 过滤掉数量为0的状态

        bugChart.value.setOption({
          title: {
            text: '我的缺陷状态分布',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'horizontal',
            bottom: '0%',
            type: 'scroll'
          },
          series: [
            {
              name: '缺陷状态',
              type: 'pie',
              radius: '50%',
              data: bugStatusData,
              label: {
                show: true,
                formatter: '{b}: {c}' // 显示名称和数量
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        })
      }

      // 更新统计卡片数据
      statistics.value = {
        ongoingTasks: allTasks.filter((task) => task.status !== 4).length,
        ongoingBugs: (res.data.bugVoList || []).filter((bug) => bug.status !== 4).length,
        projectCount: res.data.projectCount || 0
      }
    } else {
      Message.error(res.message || '获取统计数据失败')
    }
  } catch (error) {
    console.error('Failed to load statistics:', error)
    Message.error('获取统计数据失败')
  }
  try {
    // 获取我的未完成信息
    const res: any = await getStatisticsCurrentUsingGet({
      projectId
    })
    if (res.code === 0) {
      myUnfinishedInfo.value = res.data
      
      // 1. 设置项目数量
      projectCount.value = projects.value.filter((project) => project.status !== 4).length

      // 2. 合并需求和任务数据
      const unfinishedTasks = [
        ...(res.data.requirementVoList || []).map(item => ({
          ...item,
          type: '需求',
          itemType: 'requirement',
          priority: item.priority || 0,
          code: item.code || '',
          description: item.description || ''
        })),
        ...(res.data.taskVoList || []).map(item => ({
          ...item,
          type: '任务',
          itemType: 'task',
          priority: item.priority || 0,
          code: item.code || '',
          description: item.description || ''
        }))
      ]

      // 3. 处理任务列表数据
      taskList.value = unfinishedTasks.map((task, index) => {
        const statusConfig = Object.values(COMPLETE_STATUS_CONFIG).find(
          config => config.value === task.status
        )

        return {
          id: index + 1,
          code: task.code,
          title: task.title,
          type: task.type,
          itemType: task.itemType,
          description: task.description,
          priority: PRIORITY_CONFIG[`P${task.priority}`]?.label || 'P2',
          priorityColor: PRIORITY_CONFIG[`P${task.priority}`]?.color || PRIORITY_CONFIG.P2.color,
          status: statusConfig?.label || '未知',
          statusColor: statusConfig?.color || '',
          startTime: dayjs(task.startTime).format('YYYY-MM-DD HH:mm'),
          endTime: dayjs(task.endTime).format('YYYY-MM-DD HH:mm'),
          deadline: dayjs(task.endTime).format('YYYY-MM-DD HH:mm'),
          rawData: task
        }
      })

      // 4. 处理缺陷列表数据
      bugList.value = (res.data.bugVoList || []).map((bug, index) => {
        const statusConfig = Object.values(COMPLETE_STATUS_CONFIG).find(
          config => config.value === bug.status
        )

        return {
          id: index + 1,
          code: bug.code,
          title: bug.title,
          description: bug.description || '',
          level: PRIORITY_CONFIG[`P${bug.priority}`]?.label || 'P2',
          levelColor: PRIORITY_CONFIG[`P${bug.priority}`]?.color || PRIORITY_CONFIG.P2.color,
          status: statusConfig?.label || '未知',
          statusColor: statusConfig?.color || '',
          startTime: dayjs(bug.startTime).format('YYYY-MM-DD HH:mm'),
          endTime: dayjs(bug.endTime).format('YYYY-MM-DD HH:mm'),
          createTime: dayjs(bug.createAt).format('YYYY-MM-DD HH:mm'),
          rawData: bug
        }
      })

    } else {
      Message.error(res.message || '获取统计数据失败')
    }
  } catch (error) {
    console.error('Failed to load statistics:', error)
    Message.error('获取统计数据失败')
  }
}

// 生成本周日期数据
const generateWeekDays = () => {
  const today = dayjs()
  const startOfWeek = today.startOf('week') // 获取本周开始日期
  const dates = []

  for (let i = 0; i < 7; i++) {
    const currentDate = startOfWeek.add(i, 'day')
    // 只返回 MM-DD 格式
    dates.push(currentDate.format('MM-DD'))
  }

  return dates
}

// 初始化折线图配置
const initTrendCharts = () => {
  // 初始化任务趋势图配置模板
  taskTrendChart.value.setOption({
    grid: {
      top: 40,
      right: 20,
      bottom: 40,
      left: 40,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c}个'
    },
    xAxis: {
      type: 'category',
      data: generateWeekDays()
    },
    yAxis: {
      type: 'value',
      minInterval: 1
    },
    series: [
      {
        name: '任务',
        type: 'line',
        data: new Array(7).fill(0),
        symbolSize: 8,
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  })

  // 初始化缺陷趋势图配置模板
  bugTrendChart.value.setOption({
    grid: {
      top: 40,
      right: 20,
      bottom: 40,
      left: 40,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      formatter: '{b}: {c}个'
    },
    xAxis: {
      type: 'category',
      data: generateWeekDays()
    },
    yAxis: {
      type: 'value',
      minInterval: 1
    },
    series: [
      {
        name: '缺陷',
        type: 'line',
        data: new Array(7).fill(0),
        symbolSize: 8,
        label: {
          show: true,
          position: 'top'
        }
      }
    ]
  })
}

// 更新折线图数据
const updateTrendCharts = (weekDays: string[], taskData: number[], bugData: number[]) => {
  // 更新任务趋势图数据
  if (taskTrendChart.value) {
    taskTrendChart.value.setOption({
      xAxis: {
        data: weekDays
      },
      series: [
        {
          data: taskData
        }
      ]
    })
  }

  // 更新缺陷趋势图数据
  if (bugTrendChart.value) {
    bugTrendChart.value.setOption({
      xAxis: {
        data: weekDays
      },
      series: [
        {
          data: bugData
        }
      ]
    })
  }
}

// 修改预览状态控制，添加缺陷相关字段
const previewWrapper = ref({
  taskPreviewVisiable: false,
  requirementPreviewVisiable: false,
  bugPreviewVisible: false,
  taskPreviewId: null,
  requirementPreviewId: null,
  bugPreviewId: null
})

// 修改点击处理函数，添加缺陷处理
const handleItemClick = (record: any, type: string) => {
  if (!selectedProject.value) return

  if (type === 'bug') {
    previewWrapper.value.bugPreviewVisible = true
    previewWrapper.value.bugPreviewId = record.rawData?.id || record.id
  } else if (record.itemType === 'requirement') {
    previewWrapper.value.requirementPreviewVisiable = true
    previewWrapper.value.requirementPreviewId = record.rawData.id
  } else if (record.itemType === 'task') {
    previewWrapper.value.taskPreviewVisiable = true
    previewWrapper.value.taskPreviewId = record.rawData.id
  }
}

// 修改预览关闭处理函数，添加缺陷处理
const handlePreviewClose = (id: number, type: string) => {
  if (type === 'task') {
    previewWrapper.value.taskPreviewVisiable = false
    previewWrapper.value.taskPreviewId = null
  } else if (type === 'requirement') {
    previewWrapper.value.requirementPreviewVisiable = false
    previewWrapper.value.requirementPreviewId = null
  } else if (type === 'bug') {
    previewWrapper.value.bugPreviewVisible = false
    previewWrapper.value.bugPreviewId = null
  }
  // 关闭后重新加载数据
  loadStatistics()
}

onMounted(async () => {
  // 加载项目列表
  await loadProjects()

  // 初始化图表实例
  taskChart.value = echarts.init(document.getElementById('taskChart'))
  bugChart.value = echarts.init(document.getElementById('bugChart'))
  taskTrendChart.value = echarts.init(document.getElementById('taskTrendChart'))
  bugTrendChart.value = echarts.init(document.getElementById('bugTrendChart'))

  // 初始化折线图配置
  initTrendCharts()

  // 监听窗口大小变化
  window.addEventListener('resize', handleResize)
})

// 处理窗口大小变化
const handleResize = () => {
  taskChart.value?.resize()
  bugChart.value?.resize()
  taskTrendChart.value?.resize()
  bugTrendChart.value?.resize()
}

// 组件卸载时清理
onUnmounted(() => {
  // 移除事件监听
  window.removeEventListener('resize', handleResize)

  // 销毁图表实例
  if (taskChart.value) {
    taskChart.value.dispose()
  }
  if (bugChart.value) {
    bugChart.value.dispose()
  }
  if (taskTrendChart.value) {
    taskTrendChart.value.dispose()
  }
  if (bugTrendChart.value) {
    bugTrendChart.value.dispose()
  }
})

// 跳转到项目列表
const goToProjects = () => {
  router.push('/missions/projects')
}

// 修改项目切换处理函数
const handleProjectChange = (projectId: number) => {
  selectedProjectId.value = projectId
  selectedProject.value = projects.value.find(p => p.id === projectId) || null
}
</script>

<template>
  <div class="container">
    <div class="content-wrapper">
      <div class="content">
        <!-- 修改项目选择器部分 -->
        <div class="mb-4 project-selector">
          <a-select
            v-model="selectedProjectId"
            placeholder="请选择项目"
            style="width: 240px"
            @change="handleProjectChange"
          >
            <a-option
              v-for="project in projects"
              :key="project.id"
              :value="project.id"
              :label="project.title"
            />
          </a-select>
          <div class="project-title">
            <icon-apps class="project-icon" />
            <span>当前项目</span>
          </div>
        </div>

        <!-- 统计卡片 -->
        <a-row :gutter="16" class="mb-4">
          <a-col :span="8">
            <a-card hoverable>
              <div class="statistics-item">
                <div class="text-xl mb-2">进行中的任务</div>
                <div class="text-3xl text-primary">{{ statistics.ongoingTasks }}</div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable>
              <div class="statistics-item">
                <div class="text-xl mb-2">进行中的缺陷</div>
                <div class="text-3xl text-warning">{{ statistics.ongoingBugs }}</div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="8">
            <a-card hoverable class="cursor-pointer" @click="goToProjects">
              <div class="statistics-item">
                <div class="text-xl mb-2">进行中的项目</div>
                <div class="text-3xl text-success">{{ statistics.projectCount }}</div>
              </div>
            </a-card>
          </a-col>
        </a-row>

        <!-- 主要内容区域 -->
        <a-row :gutter="16">
          <!-- 左侧图表区域 -->
          <a-col :span="10">
            <!-- 任务状态饼图 -->
            <a-card class="mb-4">
              <div id="taskChart" style="height: 300px"></div>
            </a-card>
            <!-- 缺陷状态饼图 -->
            <a-card class="mb-4">
              <div id="bugChart" style="height: 300px"></div>
            </a-card>
            <!-- 任务趋势图 -->
            <a-card class="mb-4">
              <div id="taskTrendChart" style="height: 300px"></div>
            </a-card>
            <!-- 缺陷趋势图 -->
            <a-card>
              <div id="bugTrendChart" style="height: 300px"></div>
            </a-card>
          </a-col>

          <!-- 右侧列表区域 -->
          <a-col :span="14">
            <a-card class="mb-4">
              <template #title>
                <div class="flex justify-between items-center">
                  <span>我的任务 ({{ taskList.length }})</span>
                </div>
              </template>
              <a-table :data="taskList" :pagination="false" :scroll="{ x: 1200, y: 300 }">
                <template #columns>
                  <a-table-column title="编号" align="center" :width="80" fixed="left">
                    <template #cell="{ rowIndex }">
                      {{ rowIndex + 1 }}
                    </template>
                  </a-table-column>
                  <a-table-column title="任务标题" data-index="title" :width="160">
                    <template #cell="{ record }">
                      <a-link @click="handleItemClick(record, 'task')">{{ record.title }}</a-link>
                    </template>
                  </a-table-column>
                  <a-table-column title="类型" data-index="type" :width="100" />
                  <a-table-column title="优先级" data-index="priority" :width="100">
                    <template #cell="{ record }">
                      <a-tag :color="record.priorityColor">
                        {{ record.priority }}
                      </a-tag>
                    </template>
                  </a-table-column>
                  <a-table-column title="完成状态" data-index="status" :width="100">
                    <template #cell="{ record }">
                      <a-tag :color="record.statusColor">{{ record.status }}</a-tag>
                    </template>
                  </a-table-column>
                  <a-table-column title="开始日期" data-index="startTime" :width="150" />
                  <a-table-column title="截止日期" data-index="deadline" :width="150" />
                </template>
              </a-table>
            </a-card>

            <a-card>
              <template #title>
                <div class="flex justify-between items-center">
                  <span>我的缺陷 ({{ bugList.length }})</span>
                </div>
              </template>
              <a-table :data="bugList" :pagination="false" :scroll="{ x: 1200, y: 300 }">
                <template #columns>
                  <a-table-column title="编号" align="center" :width="80" fixed="left">
                    <template #cell="{ rowIndex }">
                      {{ rowIndex + 1 }}
                    </template>
                  </a-table-column>
                  <a-table-column title="缺陷标题" data-index="title" :width="160">
                    <template #cell="{ record }">
                      <a-link @click="handleItemClick(record, 'bug')">{{ record.title }}</a-link>
                    </template>
                  </a-table-column>
                  <a-table-column title="级别" data-index="level" :width="100">
                    <template #cell="{ record }">
                      <a-tag :color="record.levelColor">
                        {{ record.level }}
                      </a-tag>
                    </template>
                  </a-table-column>
                  <a-table-column title="完成状态" data-index="status" :width="100">
                    <template #cell="{ record }">
                      <a-tag :color="record.statusColor">{{ record.status }}</a-tag>
                    </template>
                  </a-table-column>
                  <a-table-column title="开始日期" data-index="startTime" :width="150" />
                  <a-table-column title="截止日期" data-index="endTime" :width="150" />
                </template>
              </a-table>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </div>
  </div>

  <!-- 任务预览弹窗 -->
  <TaskView
    v-if="previewWrapper.taskPreviewVisiable"
    :visible="previewWrapper.taskPreviewVisiable"
    :taskId="Number(previewWrapper.taskPreviewId)"
    @update:visible="(val) => (previewWrapper.taskPreviewVisiable = val)"
    @close="(val) => handlePreviewClose(val, 'task')"
  />

  <!-- 需求预览弹窗 -->
  <RequirementView
    v-if="previewWrapper.requirementPreviewVisiable"
    :visible="previewWrapper.requirementPreviewVisiable"
    :requirementId="Number(previewWrapper.requirementPreviewId)"
    @update:visible="(val) => (previewWrapper.requirementPreviewVisiable = val)"
    @close="(val) => handlePreviewClose(val, 'requirement')"
  />

  <!-- 缺陷预览弹窗 -->
  <BugView
    v-if="previewWrapper.bugPreviewVisible"
    :visible="previewWrapper.bugPreviewVisible"
    :bugId="Number(previewWrapper.bugPreviewId)"
    @update:visible="(val) => (previewWrapper.bugPreviewVisible = val)"
    @close="(val) => handlePreviewClose(val, 'bug')"
  />
</template>

<style scoped>
.container {
  height: 100%;
  background-color: var(--color-bg-1);
}

.content-wrapper {
  height: 100%;
  overflow-y: auto;
}

.content {
  padding: 16px;
  min-height: 100%;
}

.statistics-item {
  text-align: center;
  padding: 20px;
}

.text-primary {
  color: rgb(var(--primary-6));
}

.text-warning {
  color: rgb(var(--warning-6));
}

.text-success {
  color: rgb(var(--success-6));
}

/* 自定义滚动条样式 */
.content-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.content-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--color-text-4);
  border-radius: 4px;
}

.content-wrapper::-webkit-scrollbar-track {
  background-color: var(--color-fill-2);
}

.cursor-pointer {
  cursor: pointer;
}

/* 自定义表格滚动条样式 */
:deep(.arco-table-body) {
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--color-text-4);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-track {
    background-color: var(--color-fill-2);
  }
}

.gap-2 {
  gap: 8px;
}

.mb-4 {
  margin-bottom: 16px;
}

.project-selector {
  display: flex;
  align-items: center;
  gap: 16px;
}

.project-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgb(var(--primary-6));
  padding: 6px 12px;
  background: linear-gradient(to right, var(--color-primary-light-1), var(--color-primary-light-2));
  border-radius: 15px;
  box-shadow: 0 2px 6px rgba(var(--primary-6), 0.1);
  transition: all 0.3s ease;
}

.project-title:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(var(--primary-6), 0.15);
}

.project-icon {
  font-size: 16px;
}
</style>
